<template>
    <div class="table_list_selector">
        <el-dialog width="1100px" title="请选择调查的老师" :visible.sync="state"  :show-close="true" :close-on-click-modal="false">
            <el-row>
                <!-- table展示列=====================开始 -->
                <el-col :span="6">
                    <div>
                        <!-- 树形结构 -->
                        <el-tree
                          class="filter-tree"
                          :data="OrganizationTree.dataList"
                          :props="OrganizationTree.props"
                          :default-expand-all="false"
                          accordion
                          @node-click="handleTreeNodeClick"
                          ref="OrganizationTree">
                        </el-tree>
                    </div>

                </el-col>
                <el-col :span="12" style="padding:0 20px; max-height:427px; overflow-y:auto; border-right: 1px solid transparent;">
                    <div class="components_searchs clearfix">
                        <div class="el-form demo-form-inline el-form--inline">
                            <div class="el-form-item">
                                <label class="el-form-item__label" style="width: 105px;">账户/用户名</label>
                                <div class="el-form-item__content">
                                    <el-input v-model="searchForm.name" placeholder="请输入账户/用户名"></el-input>
                                </div>
                            </div>
                            <div class="el-form-item" style="padding-top: 4px;">
                                <el-button size="mini" type="primary" icon="el-icon-search" @click="loadData">查询</el-button>
                            </div>
                            <div class="el-form-item" style="padding-top: 4px;">
                                <el-button size="mini" type="primary" icon="el-icon-refresh" @click="resertSearch">重置</el-button>
                            </div>
                        </div>
                    </div>
                    <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" label="序号" width="55" align="center"></el-table-column>
                        <el-table-column prop="email"     label="账号" align="center"></el-table-column>
                        <el-table-column prop="name"      label="姓名" align="center"></el-table-column>
                        <el-table-column prop="mobile"    label="电话" align="center" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <div class="paginationBox">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 30, 50, 100]"
                            :page-size="pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="totalSize">
                        </el-pagination>
                    </div>
                </el-col>
                <!-- table展示列=====================结束 -->
                <!-- 列表展示=====================开始 -->
                <el-col :span="6" class="checked_boxs">
                    <h3>已选择班级</h3>
                    <!-- {{checkedPageList}} -->
                    <ul v-for="(checkedPageItem,index) in checkedPageList" :key="index">
                        <li v-for="(item,index) in checkedPageItem" :key="item.id">
                            <a href="javascript:void(0);" class="el-icon-circle-close is-show-close" @click="delectItem(item.id)"></a>
                            {{item.name}}
                        </li>
                        <!-- } -->
                    </ul>
                </el-col>
                <!-- 列表展示=====================结束 -->
            </el-row>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="primary"
                size="small">所有用户</el-button> -->
                <el-button type="primary"
                @click="submitChoice"
                v-loading.fullscreen.lock="fullscreenLoading"
                size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        props:{},
        data() {
            return {
                state:false,
                fullscreenLoading: false,
                // 树检索input值
                filterText: null,
                //院校树
                OrganizationTree: {
                    props: {
                        label: 'name',
                        children: 'child',
                        isLeaf: false
                    },
                     dataList: [
                    ],
                    emptyText: "暂无数据"
                },
                self: this,
                totalSize: 0,
                currentPage:1,
                pageSize:8,
                checkedList:[],
                checkedPageList:[],
                dataList:[],
                searchForm:{
                    name: null
                },
                tableList: {
                    apiUrl: api.userListUrl,
                    queryParams: {
                        managermentCenter:null
                    },
                    fields: [{
                            prop: "__checkbox",
                            label: "序号",
                        },{
                            prop: "email",
                            label: "账号",
                        },
                        {
                            prop: "name",
                            label: "姓名",
                        },
                        {
                            prop: "mobile",
                            label: "电话",
                        }
                    ],
                },
            }
        },
        watch: {
            currentPage(val,oldVal){
                this.loadData();
            },
            pageSize(val,oldVal){
                this.loadData();
            }
        },
        created() {},
        mounted() {},
        methods: {
            // 显示弹层
            showDialog(){
                this.state = true;
                this.closeDialog();
                // 院校树初始化 获取全部院校列表数据
                this.getOrganizationTreeList();
                this.loadData();
            },
            // 关闭弹层
            closeDialog(){
                // this.state = false;
                this.currentPage = 1;
                this.checkedList = [];
                this.checkedPageList = [];
            },
            getOrganizationTreeList(){
                // 获取组织机
                let self = this;
                this.axios.get(api.officesTreeUrl).then((response) =>{
                    if (response.data.success) {
                        if(self.OrganizationTree.dataList.length == 0){
                            self.OrganizationTree.dataList.push(response.data.data);
                        }
                        self.tableList.queryParams.managermentCenter = self.OrganizationTree.dataList[0].id;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
            },
            loadData(){
                let self = this;
                // 获取数据
                this.axios.get(this.tableList.apiUrl,{
                    params:{
                        pageNum: self.currentPage,
                        pageSize: self.pageSize,
                        name : self.searchForm.name,
                        managermentCenter: self.tableList.queryParams.managermentCenter
                    }
                }).then((response)=>{
                    if(response.data.success){
                        self.dataList = response.data.data.list;
                        self.totalSize = response.data.data.total;
                        //显示选中的
                        let checkedList = _.compact(_.flattenDeep(self.checkedPageList));
                        let arr = [];
                        _.forEach(checkedList,function(item,index){
                            let checkboxItem = '';
                            checkboxItem = _.find(self.dataList, function(chr) {
                                return chr.id == item.id;
                            })
                            if(checkboxItem){
                                arr.push(checkboxItem);
                            }
                        })

                        if(arr.length > 0 ){
                            self.toggleSelection(arr,true);
                        }

                    }else{
                        this.$message.error(response.data.msg);
                    }
                })
            },
            toggleSelection(rows) {
                let self = this;
                if (rows) {
                    rows.forEach(row => {

                        self.$nextTick(function(){
                            this.$refs.multipleTable.toggleRowSelection(row,true);
                        })
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            // checkox选择器
            handleSelectionChange(val) {
                this.$set(this.checkedPageList,this.currentPage,_.cloneDeep(val));
            },
            handleSizeChange(val){
                if(isNaN(val)){
                    val = 30;
                }
                this.pageSize = val;
            },
            handleCurrentChange(val){
                if(val < 1){
                    val = 1;
                }
                this.currentPage = val;
            },
            // 重置
            resertSearch(){
                this.searchForm.name = null;
                this.tableList.queryParams.managermentCenter = null;
                this.loadData();
            },
            // 删除操作
            delectItem(val){
                let self = this;
                // 判断删除的地方
                _.forEach(this.checkedPageList,function(checkedPageArr,pageNum){
                    _.forEach(checkedPageArr,function(checkboxItem,itemNum){
                        if(checkboxItem){
                            if(checkboxItem.id == val){
                                self.checkedPageList[pageNum].splice(itemNum,1);
                            }
                        }
                    })
                })

                //显示选中的
                let checkedList = _.compact(_.flattenDeep(self.checkedPageList));
                let arr = [];

                if(checkedList.length > 0){
                    _.forEach(checkedList,function(item,index){
                        let checkboxItem = '';
                        checkboxItem = _.find(self.dataList, function(chr) {
                            return chr.id == item.id;
                        })


                        if(checkboxItem){
                            arr.push(checkboxItem);
                        }
                    })
                    if(arr.length > 0 ){
                        self.toggleSelection();
                        self.toggleSelection(arr,true);
                    }else{
                        self.toggleSelection();
                    }
                }else{
                    self.toggleSelection();
                }
            },
            // 格式化数据
            formatData(){
                let data = _.compact(_.flattenDeep(this.checkedPageList));
                // console.log(_.map(data,'id','name'));
                // console.log(JSON.stringify(data));
                let result = [];
                data.map((item)=>{
                    let temp ={
                        teacherId:item.id,
                        teacherName:item.name
                    }
                    result.push(temp)
                })
                return result;
            },
            // 点击树节点触发事件
            handleTreeNodeClick(data,node,treeObj){
                this.tableList.queryParams.managermentCenter = data.id;
                this.loadData();
            },
            // 数据提交
            submitChoice(){
                let self = this;
                let submitData = self.formatData();
                self.state = false;
                self.$parent.callBackTeachers(submitData);
            }
        },
        components: {}
    };
</script>
<style scoped>


.checked_boxs{
    max-height: 400px;
    overflow-y: auto;
}
.checked_boxs h3{
    padding-left: 20px;
    background: #F7F7F7;
    color: #878d99;
    font-size: 12px;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}
.checked_boxs li{
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.checked_boxs li a{
    margin-right: 5px;
}

</style>